<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="layouts/main">
<header>
    <title>Create Survey</title>
</header>

<body>
<div id="content" class="span10" layout:fragment="content">
    <!-- start: Content -->

    <div>
        <ul class="breadcrumb">
            <li>
                <a href="#">Home</a> <span class="divider">/</span>
            </li>
            <li>
                <a href="#">Manage Surveys</a>
            </li>
        </ul>
    </div>
    <div class="row-fluid sortable">
        <div class="box span12">
            <div class="box-header" data-original-title>
                <h2><i class="icon-edit"></i><span class="break"></span>Create Survey</h2>
                <div class="box-icon">
                    <a href="#" class="btn-minimize"><i class="icon-chevron-up"></i></a>
                    <a href="#" class="btn-close"><i class="icon-remove"></i></a>
                </div>
            </div>

            <div class="box-content">
                <form th:action="@{create}" method="post" enctype="multipart/form-data" th:object="${createSurveyForm}"
                      class="form-horizontal">
                    <div class="error-tip"  th:each="err : ${#fields.errors('*')}" th:text="${err}">Form has error</div>
                    <hr th:if="${#fields.hasErrors('*')}">
                    <fieldset>
                        <div class="control-group">
                            <label class="control-label" for="title">Title</label>
                            <div class="controls">
                                <input type="text" class="input-xlarge" th:field="*{title}">
                            </div>
                            <div class="error-tip"  th:if="${#fields.hasErrors('title')}" th:errors="*{title}">Title is not correct.</div>
                        </div>
                        <div class="control-group hidden-phone">
                            <label class="control-label" for="description">Description</label>
                            <div class="controls">
                                <textarea class="cleditor" th:field="*{description}" rows="3"></textarea>
                            </div>
                            <div class="error-tip"  th:if="${#fields.hasErrors('description')}" th:errors="*{description}">Description is not correct.</div>
                        </div>
                        <div class="control-group hidden-phone">
                            <label class="control-label" for="frontText">Text before survey</label>
                            <div class="controls">
                                <textarea th:field="*{frontText}" rows="3"></textarea>
                            </div>
                            <div class="error-tip"  th:if="${#fields.hasErrors('frontText')}" th:errors="*{frontText}">Text before survey is not correct.</div>
                        </div>
                        <div class="control-group hidden-phone">
                            <label class="control-label" for="endText">Text after survey</label>
                            <div class="controls">
                                <textarea th:field="*{endText}" rows="3"></textarea>
                            </div>
                            <div class="error-tip"  th:if="${#fields.hasErrors('endText')}" th:errors="*{endText}">Text after survey is not correct.</div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="startTime">Start Time</label>
                            <div class="controls">
                                <input type="text" class="input-xlarge datetimepicker" th:field="*{startTime}">
                            </div>
                            <div class="error-tip"  th:if="${#fields.hasErrors('startTime')}" th:errors="*{startTime}">Start Time is not correct.</div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="endTime">End Time</label>
                            <div class="controls">
                                <input type="text" class="input-xlarge datetimepicker" th:field="*{endTime}">
                            </div>
                            <div class="error-tip"  th:if="${#fields.hasErrors('endTime')}" th:errors="*{endTime}">End Time is not correct.</div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="cover">Cover Image</label>
                            <div class="controls">
                                <input class="input-file uniform_on" th:field="*{cover}" type="file">
                            </div>
                            <div class="error-tip"  th:if="${#fields.hasErrors('cover')}" th:errors="*{cover}">Cover is not correct.</div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="bg">Background Image</label>
                            <div class="controls">
                                <input class="input-file uniform_on" th:field="*{bg}" type="file">
                            </div>
                            <div class="error-tip"  th:if="${#fields.hasErrors('bg')}" th:errors="*{bg}">Background Image is not correct.</div>
                        </div>
                        <div class="form-actions">
                            <button type="submit" class="btn btn-primary">Save changes</button>
                            <button type="reset" class="btn">Cancel</button>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div><!--/span-->

    </div><!--/row-->


    <!-- end: Content -->
</div><!--/#content.span10-->
<script layout:fragment="extrascript" th:inline="javascript">
    $('#startTime').datetimepicker({
        format:[[${datetimeFormat}]]
    });
    $('#endTime').datetimepicker({
        format:[[${datetimeFormat}]]
    });
</script>

</body>
</html>
